<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全部商品分类</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../iconfont/font_5ic96lqwif3/iconfont.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <script src="../js/jquery-1.11.2.min.js"></script>
</head>

<body>
    <!-- 列表页头部隐藏吸顶搜索框 -->
    <div class="list-top-search">
        <div class="top-search-bx">
            <img src="../images/zqh/滑轮事件图片.jpg" alt="">
            <div class="top-search-box">


                <select name="" id="" class="list-search1">
                    <option value="">&nbsp;&nbsp;产品</option>
                    <option value="">&nbsp;&nbsp;店铺</option>
                </select>
                <input type="text" placeholder="请输入您要搜索的关键字" class="search-box1">
                <button type="submit" class="submit-btn1">搜索</button>


            </div>
        </div>
    </div>
    <!-- 列表页头部 -->
    <div class="div-list-top">
        <div class="list-top-bx">
            <!-- 列表页头部左侧菜单 -->
            <div class="list-top-fl">
                <a href="../html/list.html">猪易购</a>
                <p style="font-size: 12px;">欢迎您|养猪业一站式网上购物商城</p>
                <a href="../index.html" style="padding: 0 2px;">[首页]</a>
                <a href="login.html" style="padding: 0 2px;">[登录]</a>
                <a href="login.html" style="padding: 0 2px; ">[ <span>注册</span> ]</a>
            </div>
            <!-- 列表页头部右侧菜单 -->
            <div class="list-top-fr">
                <div class="fr-app"><a href="javascript:;">下载养猪宝APP<i class="iconfont icon-icon_upload"></i></a>
                    <div class="APP-code">
                        <img src="../images/zqh/app_download.png" alt="">
                    </div>
                </div>
                <div class="fr-mine"><a href="javascript:;">我的猪易购 <i class="iconfont icon-icon_upload"></i> </a>
                    <div class="mine-menu" style="line-height: 20px;">
                        <li class="selected"><a href="javascript:;">我的订单</a></li>
                        <li><a href="javascript:;">买家中心</a></li>
                        <li><a href="javascript:;">卖家中心</a></li>
                    </div>
                </div>
                <div class="fr-shop"><a href="shopcar.html">购物车 <i class="iconfont icon-weibiaoti1"></i> </a>
                    <div class="carbtn">
                        <li><a href="javascript:;">查看进货</a></li>
                    </div>
                </div>
                <p> <i class="iconfont icon-icon-test"></i> 客服热线:<span style="color: #ff6931;">400-808-6188</span></p>
            </div>
        </div>
    </div>
    <!-- 列表标题  搜索框 -->
    <div class="list-title">
        <div class="list-title-bx">
            <a href="javascript:;"><img src="../images/zqh/list.logo.jpg" alt=""></a>
            <div class="list-warper">
                <select name="" id="" class="list-search">
                    <option value="">&nbsp;&nbsp;产品</option>
                    <option value="">&nbsp;&nbsp;店铺</option>
                </select>
                <input type="text" placeholder="请输入您要搜索的关键字" class="search-box">
                <button type="submit" class="submit-btn">搜索</button>
            </div>
        </div>
    </div>
    <!-- 菜单 -->
    <div class="nav-w">
        <div class="nav-w-bx">
            <div style="background: #ff6931" class="list-nav-all list-nav-alll"><a href="javascript:;"
                    style="color: #fff;" class="Orange">全部商品分类</a>
                <!-- 导航栏二级 -->
                <div id="list-nav-slider" class="list-nav-slider">
                    <ul id="slider-menu" class="slider-menu">
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">技术服务</a></div>
                            <div class="slider-sub"><a href="javascript:;">检测</a></div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">饲料</a></div>
                            <div class="slider-sub">
                                <a href="javascript:;">饲料原料</a>
                                <a href="javascript:;">全价料</a>
                                <a href="javascript:;">浓缩料</a>
                                <a href="javascript:;">预混料</a>
                                <a href="javascript:;">其他</a>
                            </div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">兽药</a></div>
                            <div class="slider-sub">
                                <a href="javascript:;">禽药</a>
                                <a href="javascript:;">抗生素</a>
                                <a href="javascript:;">驱虫药</a>
                                <a href="javascript:;">消毒药</a>
                                <a href="javascript:;">针剂</a>
                                <a href="javascript:;">激素类</a>
                                <a href="javascript:;">保健药品</a>
                                <a href="javascript:;">防霉</a>
                                <a href="javascript:;">驱虫</a>
                                <a href="javascrpit:;">其他药类</a>
                            </div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">添加剂</a></div>
                            <div class="slider-sub">
                                <a href="javascript:;">酶制剂</a>
                                <a href="javascript:;">促生长剂</a>
                                <a href="javascript:;">矿物质</a>
                                <a href="javascript:;">其他</a>
                                <a href="javascript:;">氨基酸</a>
                                <a href="javascript:;">酸化剂</a>
                                <a href="javascript:;">脱霉剂</a>
                                <a href="javascript:;">环境改良剂</a>
                            </div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">生物制品</a></div>
                            <div class="slider-sub">
                                <a href="javascript:;">灭活疫苗</a>
                                <a href="javascript:;">其他疫苗</a>
                            </div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">机械设备</a></div>
                            <div class="slider-sub">
                                <a href="javascript:;">人工授精器材</a>
                                <a href="javascript:;">常规器械</a>
                                <a href="javascript:;">机械化设备</a>
                            </div>
                        </li>
                        <li class="nli">
                            <div class="slider-biaoti"><a href="javascript:;">种猪</a></div>
                            <div class="slider-sub"></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list-nav-alll"><a href="../index.html" class="Orange">首页</a></div>
            <div class="list-nav-alll"><a href="javascript:;" class="Orange">商品品牌</a></div>
            <div class="list-nav-alll"><a href="javascript:;" class="Orange">查猪价</a></div>
        </div>

    </div>



    <!-- 我也不知道起啥名 -->
    <div class="list-detailnav">
        <div class="list-detail-bx">
            <strong><a href="javascript:;">器械设备</a></strong>
            <span>><a href="javascript:;">养殖器械</a></span>
        </div>
    </div>

    <!-- 品牌名列表 -->
    <div class="list-select">
        <div class="list-select-bx">
            <div class="select-pinpai">
                <p>品牌：</p>
                <div class="select-pinpai1">
                    <div><a href="javascript:;" style="background: #4598D2;">不限</a></div>
                    <div><a href="javascript:;">冠江</a></div>
                    <div><a href="javascript:;">曾鑫牧业</a></div>
                    <div><a href="javascript:;">永高</a></div>
                    <div><a href="javascript:;">牧泰</a></div>
                    <div><a href="javascript:;">尚农畜牧</a></div>
                    <div><a href="javascript:;">猪乐道</a></div>
                    <div><a href="javascript:;">新乡和协</a></div>
                    <div><a href="javascript:;">惠阳</a></div>
                    <div><a href="javascript:;">方腾</a></div>
                    <div><a href="javascript:;">恒峰</a></div>
                    <div><a href="javascript:;">现代畜牧</a></div>
                    <div><a href="javascript:;">猪易购自营</a></div>
                    <div><a href="javascript:;">牧联</a></div>
                    <div><a href="javascript:;">世博</a></div>
                    <div><a href="javascript:;">神农</a></div>
                    <div><a href="javascript:;">科行衡器</a></div>
                    <div><a href="javascript:;">宏天欣</a></div>
                    <div><a href="javascript:;">诺威泰克</a></div>
                    <div><a href="javascript:;">武汉亚卫</a></div>
                    <div><a href="javascript:;">济南约克</a></div>
                    <div><a href="javascript:;">北京中元合创</a></div>
                    <div><a href="javascript:;">华畜</a></div>
                    <div><a href="javascript:;">巨龙动保</a></div>
                    <div><a href="javascript:;">赣牧医疗</a></div>
                    <div><a href="javascript:;">周口精华牧业</a></div>
                    <div><a href="javascript:;">叁玖物联</a></div>
                    <div><a href="javascript:;">百能动保</a></div>
                    <div><a href="javascript:;">微牧莱斯</a></div>
                    <div><a href="javascript:;">猪升源</a></div>
                    <div><a href="javascript:;">朱大福</a></div>
                    <div><a href="javascript:;">镭盾科技</a></div>
                    <div><a href="javascript:;">易农科技</a></div>
                    <div><a href="javascript:;">喜来高</a></div>
                    <div><a href="javascript:;">扶星</a></div>
                </div>
            </div>
            <div class="select-fenlei">
                <p>分类：</p>
                <div class="select-fenlei1">
                    <div><a href="javascript:;">医疗器械</a></div>
                    <div><a href="javascript:;">食槽</a></div>
                    <div><a href="javascript:;">饮水装置</a></div>
                    <div><a href="javascript:;">驱蚊棒香</a></div>
                    <div><a href="javascript:;">猪栏</a></div>
                    <div><a href="javascript:;">地板</a></div>
                    <div><a href="javascript:;">控温设备</a></div>
                    <div><a href="javascript:;">通风设备</a></div>
                    <div><a href="javascript:;">消毒设备</a></div>
                    <div><a href="javascript:;">饲料加工设备</a></div>
                    <div><a href="javascript:;">建舍设备</a></div>
                    <div><a href="javascript:;">检查仪器</a></div>
                    <div><a href="javascript:;">污水处理</a></div>
                    <div><a href="javascript:;">自动加药器</a></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 排序按钮 -->
    <div class="list-filter">
        <div class="list-filter-bx">
            <div id="order">
                <a href="javascript:;" class="current">默认排序</a>
                <a href="javascript:;"><span>销量</span><i class="iconfont icon-xiangxia"></i></a>
                <a href="javascript:;"><span>人气</span><i class="iconfont icon-xiangxia"></i></a>
                <a href="javascript:;"><span>信用</span><i class="iconfont icon-xiangxia"></i></a>
                <a href="javascript:;"><span>最新</span><i class="iconfont icon-xiangxia"></i></a>
                <a href="javascript:;"><span>价格</span><i class="iconfont icon-xiangxia"></i></a>
            </div>
            <div></div>
        </div>
    </div>

    <!-- 主体 -->
    <div class="item-search-list">
        <div class="item-search-result">
            <ul class="LList">
                <!-- <li>
                    <div class="p-info">
                        <a href="javascript:;" class="p-img"><img height="200" width="200"
                                alt="【惠阳畜牧】金属镀铬饮水器  鸭嘴式、乳头式可选  拍下备注留言 "
                                src="https://img.zhuego.com/user/6045/2017/1211/20171211061227630.jpg"></a>
                    </div>
                    <a class="p-name" href="/goods-2871.html">【惠阳畜牧】金属镀铬饮水器 鸭嘴式、乳头式可选 拍下备注留言 </a>
                    <div class="p-price" style="color: #FA5214;float: left">
                        <strong>￥70.00</strong>
                    </div>
                    <div class="p-price" style="float: right; font-size: 12px; color: #666666; " >已成交18012件</div>
                    <div class="p-shop __web-inspector-hide-shortcut__">
                        <a href="shop-6045.html" style="clear: both;" >惠阳畜牧旗舰店</a>
                    </div>
                </li>-->
            </ul>
            <div class="item-search-page">
                <div class="page"></div>
            </div>
        </div>

        <div class="item-hotproduct">
            <div class="list-hot"><strong>热销产品</strong></div>
            <ul class="List">
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/shuilongtou.jpg" alt=""></a>
                    </div>
                    <div class="pp-name"><a href="javascript:;">金属镀铬饮水器</a></div>
                    <div class="pp-price"><strong>70.00</strong></div>
                </li>
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/liaocao.jpg" alt=""></a></div>
                    <div class="pp-name"><a href="javascript:;">料槽</a></div>
                    <div class="pp-price"><strong>300.00</strong></div>
                </li>
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/beibiao.jpg" alt=""></a></div>
                    <div class="pp-name"><a href="javascript:;">动物背膘测定仪</a></div>
                    <div class="pp-price"><strong>3800.00</strong></div>
                </li>
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/buxiugangcao.jpg" alt=""></a>
                    </div>
                    <div class="pp-name"><a href="javascript:;">不锈钢方形无死角料槽</a></div>
                    <div class="pp-price"><strong>300.00</strong></div>
                </li>
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/dengtou.jpg" alt=""></a></div>
                    <div class="pp-name"><a href="javascript:;">耐高温陶瓷灯头</a></div>
                    <div class="pp-price"><strong>45.00</strong></div>
                </li>
                <li>
                    <div class="pp-img"><a href="javascript:;"><img src="../images/zqh/ouheji.jpg" alt=""></a></div>
                    <div class="pp-name"><a href="javascript:;">超声耦合剂</a></div>
                    <div class="pp-price"><strong>2.50</strong></div>
                </li>

            </ul>
        </div>
    </div>



    <script src="../js/sList.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/fenye.js"></script>

    <script>
        var oBox = document.querySelector('.page')
        var oList = document.querySelector('.LList')

        new Pagination(oBox, {
            // 页码信息
            pageInfo: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,     // 当前在第几页
                pagesize: 20,   // 一页多少条数据
                // total: 45,    // 总条数
                totalpage: 3, // 总页数
            },
            // 文字信息 
            textInfo: {
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '尾页'
            },
            change: function (n) {
                // console.log('当前在第'+n+'页')
                // 存下当前第几页 本地缓存
                localStorage.setItem('pagenum', n)
                // 开始数据渲染
                ajax({
                    url: '../server/list.php',
                    data: {
                        pagenum: n,
                        pagesize: 20
                    },
                    success(res) {
                        // console.log(typeof(res))
                        let arr = (JSON.parse(res))
                        console.log(arr.data)
                        oList.innerHTML = ''

                        arr.data.forEach(function (ele, index) {
                            let str = `<li>
                            <div class="p-info">
                                <a href="javascript:;" class="p-img" ><img height="200" width="200"
                                        alt="【惠阳畜牧】金属镀铬饮水器  鸭嘴式、乳头式可选  拍下备注留言 "
                                        src="${ele.img}" data-id="${ele.id}"></a>
                            </div>
                            <a class="p-name" href="/goods-2871.html">${ele.word} </a>
                            <div class="p-price" style="color: #FA5214;float: left">
                                <strong>${ele.price}</strong>
                            </div>
                            <div class="p-price" style="float: right; font-size: 12px; color: #666666; " >已成交${ele.number}件</div>
                            <div class="p-shop ">
                                <a href="shop-6045.html" style="clear: both;" >${ele.shopname}</a>
                            </div>
                        </li>`
                            oList.innerHTML += str
                            // flag = true
                        })




                    }
                })
            }
        })
        oList.addEventListener('click', function (ev) {
            // 查看详情
            if (ev.target.tagName === 'IMG' || ev.target.className === 'btn btn-primary') {
                let id = ev.target.getAttribute('data-id')
                window.location.href = 'detail.html?id=' + id

                localStorage.setItem('detailId', id)
            }
        })

        // var chakan = document.querySelectorAll(' .p-shop ')
        // var tupian = document.querySelectorAll('.p-info img')
        // var biaoti = document.querySelectorAll('.LList>.p-name ')
        // var jiage = document.querySelectorAll('.p-price strong')
        // var kan = document.querySelectorAll('.LList>.p-shop ')
        // console.log(chakan)
        // chakan.forEach(function (ele, index) {
        //     ele.onclick = function () {
        //         var obj = {
        //             id: index + 1,
        //             img_src: tupian[index].src,
        //             title: biaoti[index].innerHTML,
        //             price: jiage[index].innerHTML,
        //             kan:kan[index].innerHTML,

        //         }
        //         localStorage.setItem('detial', JSON.stringify(obj))
        //     }
        // })



    </script>

    <!-- 尾部 -->
    <div id="foot">
        <div class="list-foot-help">
            <dl>
                <dt>新手指南</dt>
                <dd><a href="javascript:;">注册新用户</a></dd>
                <dd><a href="javascript:;">账号密码</a></dd>
                <dd><a href="javascript:;">买家入口</a></dd>
                <dd><a href="javascript:;">卖家入口</a></dd>
                <dd><a href="javascript:;">猪儿虫协议</a></dd>
            </dl>
            <dl>
                <dt>采购商服务</dt>
                <dd><a href="javascript:;">找公司</a></dd>
                <dd><a href="javascript:;">找产品</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="javascript:;">退换货说明</a></dd>
            </dl>
            <dl>
                <dt>交易安全</dt>
                <dd><a href="javascript:;">买家防骗</a></dd>
                <dd><a href="javascript:;">卖家防骗</a></dd>
                <dd><a href="javascript:;">联系我们</a></dd>
                <dd><a href="javascript:;">交易担保</a></dd>
            </dl>
            <dl>
                <dt>猪易购规则</dt>
                <dd><a href="javascript:;">品牌知识产权规则</a></dd>
                <dd><a href="javascript:;">供应产品信息规则</a></dd>
                <dd><a href="javascript:;">图片侵权规则</a></dd>
                <dd><a href="javascript:;">招商入驻</a></dd>
                <dd><a href="javascript:;">2017年处罚一览表</a></dd>
            </dl>

        </div>
        <div class="list-foot-nav">
            <div>
                <a href="javascript:;">关于猪易购</a>
                <a href="javascript:;">联系我们</a>
                <a href="javascript:;">客服中心</a>
                <a href="javascript:;" style="border: none;">隐私策略</a>
            </div>
            <p>
                猪易购·畜牧产品在线视频交易商城Copyright &copy; 2010-2015 新海科技zhuego.com版权所有<br>
                增值电信业务经营许可证：B2--20110053　 猪易购备案号: &nbsp;&nbsp;&nbsp;赣B2--20110053-2
            </p>
            <p id="acss">
                <a href="javascript:;">商标注册证</a>
                <a href="javascript:;">计算机软件注册权：第0551562号</a>
                <a href="javascript:;">国家电子商务集成创新试点工程</a>
            </p>
        </div>
    </div>







    <script>

        // 列表页头部右侧jquery
        var $li = $(".list-top-fr>div");
        $li.mouseenter(function () {
            $(this).children("div").show();
            $(this).css({ 'background': '#fff', 'border-left': '1px solid #ccc', 'border-right': '1px solid #ccc' })
        });
        $li.mouseleave(function () {
            $(this).children("div").hide();
            $(this).css({ 'background': '#f5f5f5', 'border': 'transparent' })
        });

        // 头部右侧订单栏移入移出变色

        $(".mine-menu a").hover(function () {
            $(this).addClass("orange");
        }, function () {
            $(this).removeClass("orange");
        });


        // 菜单移入移出变色
        $(".Orange").hover(function () {
            $(this).addClass("orange");
        }, function () {
            $(this).removeClass("orange");
        });


        // 导航栏二级菜单
        $(function () {
            $('.list-nav-all').hover(function () {
                $('.list-nav-slider').show()
            }, function () {
                $('.list-nav-slider').hide()
            });


            $('.slider-sub a').hover(function () {
                $(this).css({ 'text-decoration': 'underline' })
            }, function () {
                $(this).css({ 'text-decoration': 'none' })
            });
        })


        // 品牌
        $(function () {

            $('.list-select a').hover(function () {
                $(this).css({ 'background': '#4598D2' })
                $(this).css({ 'color': '#fff' })
            }, function () {
                $(this).css({ 'background': '' })
                $(this).css({ 'color': "" })
            })

        })

        // 排序
        $(function () {
            $('#order span').hover(function () {
                $(this).css({ 'color': '#ff6931' })
            }, function () {
                $(this).css({ 'color': '' })
            });
        })


        // 滚动条吸顶搜索框
        $(document).scroll(function () {
            var scroH = $(document).scrollTop();  //滚动高度
            if (scroH > 300) {  //距离顶部大于300px时
                $('.list-top-search').fadeIn(200)
            }
            if (scroH < 300) {
                $('.list-top-search').fadeOut(200)
            }
        });




        // window.onscroll = function () {
        //     scrollFunction()
        // };
        // function scrollFunction() {
        //     if (document.documentElement.scrollTop > 600) {
        //         document.getElementById('topbtn').style.display = 'block';
        //     } else {
        //         document.getElementById('topbtn').style.display = 'none';
        //     }
        // }


        // var oTopbtn = document.querySelector('#topbtn')



        // // 点击返回顶部
        // oTopbtn.onclick = function () {
        //     document.documentElement.scrollTop = document.body.scrollTop = 0
        // }

    </script>
</body>

</html>